<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title>绑定手机号</title>
    <div data-th-replace="layout/head"></div>
</head>
<body>
    <div>
        <div class="page page-current">
            <!-- top bar -->
            <header class="bar bar-nav">
                <a class="button button-link button-nav pull-left goBack" th:href="@{/mobile/uc/userInfo}">
                    <span class="iconfont icon-fanhui"></span>
                </a>
                <h1 class='title title-white'>绑定手机号</h1>
            </header>
            <!-- top bar end-->
            <article class="content card clearfix">
                <div class="content-block">
                    <h2 class="text-center">
                        <p class="lr-icon-head"><em class="iconfont icon-shouji"></em></p>
                    </h2>
                </div>
                <div class="card-content lr__wrap">
                    <!--第一步，验证原有手机号，开始-->
                    <div th:if="!${#strings.isEmpty(user['mobile'])}" id="step1" class="card-content-inner">
                        <div class="list-block">
                            <ul class="lr-content__wrap">
                                <li>
                                    <div>
                                        <div class="item-input form-control pr">
                                            <span class="lr-tel-ico">
                                                <em class="iconfont icon-shoujihao"></em>
                                            </span>
                                            <input th:value="${user['mobile']}" readonly="readonly"  id="mobile1" maxlength="11" type="text"/>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div class="item-input form-control vCode_box  pr">
                                            <span class="lr-tel-ico">
                                                <em class="iconfont icon-xiaoxi1"></em>
                                            </span>
                                            <input placeholder="请输入验证码" id="mobileCode1" maxlength="6" type="text">
                                            <aside class="vcode_wrap">
                                                <a href="javascript:void (0);" class="button" id="sendRand1">获取验证码</a>
                                                <a href="javascript:void (0);" class="button disabled hide" id="countdown">59s后重新获取</a>
                                            </aside>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="content-block">
                                <p class="lr-suBtn__wrap">
                                    <a href="javascript:void (0);" id="nextStep" class="button button-big button-round">下一步</a>
                                </p>
                            </div>

                        </div>
                    </div>
                    <!--第一步，验证原有手机号，结束-->
                    <!--第二步，验证原有手机号，开始-->
                    <div class="card-content-inner" id="step2" th:classappend="${#strings.isEmpty(user['mobile'])}?'':'hide'">
                        <div class="list-block">
                            <ul class="lr-content__wrap">
                                <li>
                                    <div>
                                        <div class="item-input form-control pr">
                                            <span class="lr-tel-ico">
                                                <em class="iconfont icon-shoujihao"></em>
                                            </span>
                                            <input placeholder="请输入新的手机号" id="mobile2" maxlength="11" type="text"/>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div class="item-input form-control vCode_box  pr">
                                        <span class="lr-tel-ico">
                                            <em class="iconfont icon-xiaoxi1"></em>
                                        </span>
                                        <input placeholder="请输入验证码" id="mobileCode2" maxlength="6" type="text">
                                        <aside class="vcode_wrap">
                                            <a href="javascript:void (0);" class="button" id="sendRand2">获取验证码</a>
                                            <a href="javascript:void (0);" class="button disabled hide" id="countdown2">59s后重新获取</a>
                                        </aside>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="content-block">
                                <p class="lr-suBtn__wrap">
                                    <a href="javascript:void (0);" id="endComplete" class="button button-big button-round">确认绑定</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--第二步，验证原有手机号，结束-->
                </div>
            </article>
        </div>
    </div>
    <div data-th-replace="layout/footer"></div>
    <script type="text/javascript" th:src="@{{path}/front/mobile/business/user/center/binding/binding-mobile.js?v={v}(path=${staticPath},v=${v})}" charset="utf-8"></script>
</body>
</html>